import type { Graph } from "@antv/x6";

const NodeId = "WhileNode";
const NodeLabel = "循环";
const NodeTips = "(循环你内顺序执行,可使用[并行]节点)"

const properties = [
  {
    groupName: "通用",
    groupId: "common",
    items: [{
      "key": "name", 
      "name": "名称", 
      "val": "",
      "valType": "String"
    },{
      "key": "description", 
      "name": "描述", 
      "val": "",
      "valType": "String"
    },{
        "key": "taskReferenceName", 
        "name": "引用名", 
        "val": "",
        "valType": "String"
    }]
  },{
    groupName: "参数",
    groupId: "params",
    items: [{
      "key": "loopCondition", 
      "name": "循环条件",
      "val": "",
      "valType": "String"
    },{
      "key": "inputParameters", 
      "name": "入参", 
      "val": "",
      "tips": '如: {"value":"${workflow.input.value}"}',
      "valType": "json"
    }]
  }
]

export const createWhileNode = (graph:Graph)=>{
    const node = graph.createNode({
        shape: "rect",
        width: 80,
        height: 30,
        label: NodeLabel,
        attrs: commonAttrs,
        data: {
            id: NodeId,
            hasChildren: true,
            acceptChildrenIds:["ForkNode", 'SwitchNode', 'NetworkNode', 'VariableNode'],
            properties: properties
        },
        ports: {
            groups: {
              output: {
                position: 'bottom',
                attrs: {
                  circle: {
                    magnet: true,
                    stroke: '#8f8f8f',
                    r: 5,
                  },
                },
                label: {
                  position: 'top',
                },
              },
            },
        },
    });
    
    return node;
}



export const getWhileDropNode=(node:any)=>{
  node.prop("size", { width: 500, height: 200 });
  node.attr("text", {
    "fontSize": 14,
    "fill": "white",
    "refX": "10px",
    "refY": "10px",
    "textAnchor": "left",
    "textVerticalAnchor": "top",
    "text": NodeLabel + NodeTips
  })
  node.addPort({
      group: "output",
      attrs: {
      //   text: {
      //     text: "xx",
      //   },
      },
  });
  return node;
}

const commonAttrs = {
  body: {
      fill: '#fff',
      stroke: '#8f8f8f',
      strokeWidth: 1,
  },
}
